<template>
  <div class="group" ref="group">
    <search @changeSearchState="changeSearchState"/>

    <ul class="group_box" :style="{'max-height':listMaxHeight+'px'}" v-show="!searchState">

      <div class="friend_total">
        <div class="group_border"></div>
        <div class="group_total_num">{{$store.state.groupList.length}}个群聊</div>
        <div class="group_border"></div>
      </div>

      <li :class="['group_line',{active:chooseIndex==index}]" v-for="(item,index) in $store.state.groupList" :key="index" @contextmenu.prevent="getItem(item,$event)" @click="groupClick(item,index)">
        <img class="group_avatar" :src="item.roomImg" />
        <div class="group_detail">
          <div class="group_name">{{item.roomName}}</div>
          <div class="group_people">
            <img class="qunzhu" src="../../assets/qunzhu.png" v-if="$store.state.user.id==item.masterId">
            <!-- <span class="people_num">5人</span> -->
          </div>
        </div>
      </li>
    </ul>

    <searchList v-show="searchState"/>
    <shareCard :shareCardState="shareCardState" v-show="shareCardState" @changeShareCardState="changeShareCardState" />
    <groupDialog :propData="propData" @changePropData="changePropData"/>

    <ul class="contextmenu" v-if="contextmenuState" ref="contextmenuEle">
      <li class="context_select" @click="transMessage">发消息</li>
      <!-- <li class="context_select" @click="sendCard">分享群聊</li> -->
      <!-- <li class="context_select" @click="openNick" v-if="$store.state.user.id==item.masterId">修改群名称</li> -->
    </ul>
  </div>
</template>

<script>
import shareCard from '../share_card'
import groupDialog from '../group_dialog'
import search from '../search'
import searchList from '../search_list'
import bus from '../../bus'
import {groupMemberList,roomChatList,groupList} from '../../api/api'
export default {
  name:'talk',
  data(){
      return {
        listMaxHeight:0,
        contextmenuState:false,
        searchState:false,
        shareCardState:false,
        propData:{//子组件弹窗状态
          nickDialogState:false
        },
        chooseIndex:0,
        mouseItem:''
        // list:
        // [
        //   {
        //     choose:true,
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     name:'测试'
        //   },
        //   {
        //     choose:false,
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     name:'猫'
        //   },
        //   {
        //     choose:false,
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     name:'测试'
        //   },
        //   {
        //     choose:false,
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     name:'猫'
        //   }
        // ]
      }
  },
  components: {
      search,
      searchList,
      shareCard,
      groupDialog
  },
  mounted(){
    this.$nextTick(()=>{
      this.listMaxHeight = this.$refs.group.offsetHeight-56-1
    })

    bus.$on('close',msg => {
      this.contextmenuState = msg
    })

    this.groupClick({
      roomName:this.$store.state.groupList[0].roomName,
      id:this.$store.state.groupList[0].id
    },0)
  },
  computed: {
    newMessage() {
      return this.$store.state.message
    }
  },
  watch:{
    //收到的消息
    newMessage(){
      if(this.newMessage.type==3){
        let params = {
          pageNo:1,
          pageSize:500,
          masterId:this.$store.state.user.id
        }
        //重新加载群聊列表
        groupList(params)
        .then(res => {
          this.$store.commit('getGroupList',res.data.data.list)
        })
      }
    }
  },
  methods:{
    //点击发送名片
    sendCard(){
      this.shareCardState = true
    },
    //触发发送名片弹窗
    changeShareCardState(value){
      this.shareCardState = value
    },
    //打开群昵称弹窗
    openNick(){
      this.propData.nickDialogState = true
    },
    changePropData(data){
      this.propData = data
    },
    //点击发送消息按钮
    transMessage(){
      let params = {
          pageNo:1,
          pageSize:500,
          globalId:0,
          sendUserId:this.$store.state.user.id,
          toId:this.mouseItem.id
      }
      roomChatList(params)
      .then(res => {
        console.log('群聊天历史',res.data.data.list)
        if(res.data&&res.data.data.list&&res.data.data.list.length!=0){
          var newChat = res.data.data.list[0]
          if(newChat.sendUserId!=this.$store.state.user.id){
            newChat.sendUserId = this.$store.state.user.id,
            newChat.sendUserImg = this.$store.state.user.headImg
            newChat.sendUserName = this.$store.state.user.userName
          }
          newChat.toId = this.mouseItem.id
          newChat.toUserImg = this.mouseItem.roomImg
          newChat.toUserName = this.mouseItem.roomName
        }else{
          var newChat = {
            content: "",
            contentImg: "",
            contentVideo: "",
            globalId: "",
            id: 0,
            index: 0,
            messageId: 1,
            messageType: 1,
            mine: 0,
            readStatus: 0,
            sendTime: "",
            sendUserId: this.$store.state.user.id,
            sendUserImg: this.$store.state.user.headImg,
            sendUserName: this.$store.state.user.userName,
            serviceTime: "",
            toId: this.mouseItem.id,
            toUserImg: this.mouseItem.roomImg,
            toUserName: this.mouseItem.roomName
          }
        }
        newChat.type = 0
        this.$store.commit('setChatList',newChat)
        this.$store.commit('chooseTalk',0)
        this.$store.commit('setNav','talk')

        // this.$store.commit('chooseGroup',toId)
        // this.$store.commit('getGroupMembersList',res.data.data.list)
      })
    },
    //点击某个群
    groupClick(item,index){
      this.chooseIndex = index
      let params = {
          pageNo:1,
          pageSize:500,
          roomName:item.roomName,
          roomId:item.id
      }
      //加载群成员列表
      groupMemberList(params)
      .then(res => {
        this.$store.commit('chooseGroup',item.id)
        this.$store.commit('getGroupMembersList',res.data.data.list)
      })
    },
    getItem(item,event){
      var event = event || window.event;
      this.contextmenuState = true
      console.log(item)
      this.mouseItem = item

      let posX = 0, posY = 0;
      if (event.pageX || event.pageY) {
          posX = event.pageX;
          posY = event.pageY;
      } else if (event.clientX || event.clientY) {
          posX = event.clientX
          posY = event.clientY
      }

      let top = posY - this.$refs.group.offsetTop
      let left = posX - this.$refs.group.offsetLeft

      this.$nextTick(()=>{
        this.$refs.contextmenuEle.style.top = top + 'px'
        this.$refs.contextmenuEle.style.left = left + 'px'
      })
    },
    //更换搜索状态
    changeSearchState(value){
      this.searchState = value
    }
  }
}
</script>

<style scoped>
.group{
  position: relative;
}
.group_box{
  overflow: auto;
}
.group_line{
  display: flex;
  align-items: center;
  height: 54px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.group_line.active{
  background: #edeff3;
}
.group_line.active:hover{
  background: #edeff3;
}
.group_line:hover{
  background: #fbfbfb;
}
.group_avatar{
  width:34px;
  height:34px;
}
.group_detail{
  margin-left:10px;
}
.group_name{
  font-size:14px;
  color:#333;
  max-width: 180px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.pingyin_first{
  color: #c1c1c1;
  padding-left: 10px;
  font-size: 12px;
  line-height: 20px;
  background: #fcfcfc;
}
.friend_total{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bebebe;
  font-size: 12px;
  height:37px;
}
.group_border{
  width: 48px;
  height: 1px;
  background: #dedede;
}
.group_total_num{
  margin:0 5px;
}
.contextmenu{
  width:110px;
  position: absolute;
  overflow: hidden;
  background: white;
  z-index: 20;
  top:30px;
  right:-50px;
}
.context_select{
  width:110px;
  height:40px;
  padding:0 20px;
  cursor: pointer;
  font-size:14px;
  color:#333;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}
.context_select:hover{
  background: #edeff3;
}

.group_people{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.qunzhu{
  width:30px;
  height: auto;
  margin-right:2px;
}
.people_num{
  color: #b9b9b9;
  font-size: 12px;
}
</style>